<template>
  <div>
    <div class="goods_content">
      <div class="goods_list">
        <span>上架：<i>{{list.online_time | getTimer}}</i></span>
        <span style="color: #333333">售价</span>
      </div>
      <div class="goods_list">
        <span>小号：<i>{{list.username}}</i></span>
        <div class="list_price">
          <span>¥</span>
          <span>{{list.price}}</span>
        </div>
      </div>
      <div class="goods_list">
        <span>区服：<i>{{list.area}}</i></span>
      </div>
    </div>
    <div class="examine_info">
      <span>次小号已创建17天，累充618.00元</span>
      <div class="info_img">
        <img @click="tipClick" src="../../../../assets/img/transaction/detail/ic_question.png" alt="">
      </div>
      <van-button class="info_btn" round>信息已审核</van-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  methods: {
    tipClick() {
      this.$emit('tip-click')
    }
  },
  filters: {
    getTimer(item) {
      var time = new Date(item * 1000)
      var Y = time.getFullYear()
      var M = time.getMonth() + 1
      var D = time.getDate()
      var h = time.getHours()
      h = h < 10 ? '0' + h : h
      var m = time.getMinutes()
      m = m < 10 ? '0' + m : m
      var s = time.getSeconds()
      s = s < 10 ? '0' + s : s
      return M + '-' + D + ' ' + h + ':' + m 
    }
  },
}
</script>

<style lang="less" scoped>
.goods_content {
  box-sizing: border-box;
  width: 10rem;
  height: 2.933333rem;
  padding: .533333rem .4rem;
  background: #fff;
  margin-top: .16rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: .4rem;
  color: #999999;
  .goods_list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    i {
      color: #222222;
      font-weight: 500;
    }
    .list_price {
      color: #ff0000;
      font-size: .32rem;
      span:nth-child(2) {
        padding-left: .133333rem;
        font-size: .48rem;
      }
    }
  }
}

.examine_info {
  box-sizing: border-box;
  width: 10rem;
  height: 1.386667rem;
  background: #fff;
  margin-top: .013333rem;
  padding: 0 .4rem;
  color: #4676ed;
  font-size: .293333rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .info_img {
    flex: 1;
    img {
      margin-left: .133333rem;
      display: inline-block;
      width: .533333rem;
      height: .533333rem;
    }
  }
  .info_btn {
    width: 2rem;
    height: .666667rem;
    padding: 0;
    border-color: #4676ed;
    font-size: .32rem;
    color: #4676ed;
  }
}
</style>